<template>
  <van-nav-bar title="VueShop" />
  
  <van-swipe :autoplay="3000" indicator-color="white">
    <van-swipe-item @click="CouponIndex" v-for="(item, key) in coupon" :key="key">
      <van-image width="100%" height="200px" fit="cover" :src="item.thumb_text" />
    </van-swipe-item>
  </van-swipe>

    <van-grid :border="false" :column-num="4">
      <van-grid-item to="/product" text="全部商品">
      <template #icon>
          <van-image width="50" height="50" src="/assets/images/quanbu.png" />
      </template>
      </van-grid-item>
      <van-grid-item text="商品直播">
      <template #icon>
          <van-image width="50" height="50" src="/assets/images/zhibo.png" />
      </template>
      </van-grid-item>
      <van-grid-item to="/coupon" text="优惠活动">
      <template #icon>
          <van-image width="50" height="50" src="/assets/images/youhui.png" />
      </template>
      </van-grid-item>
      <van-grid-item to="/product/rank" text="榜单排行">
      <template #icon>
          <van-image width="50" height="50" src="/assets/images/bangdan.png" />
      </template>
      </van-grid-item>
    </van-grid>

    <div class="type">新品推荐</div>

  <div class="list">
    <div class="item" v-for="(item, index) in product" :key="key">
      <router-link :to="{path:'/product/info',query:{proid:item.id}}">
      <div class="back">
        <img :src="item.thumb_text" />
      </div>
      <p class="price">￥{{item.price}}</p>
    </router-link>
  </div>
  </div>

    <Tabbar />
</template>

<script setup>  
  const {proxy} = getCurrentInstance();

  let coupon = ref([])
  let product = ref([])

  // 生命周期钩子函数
  onBeforeMount(() => request())

  const request = async () =>
  {
    var result = await proxy.$POST({url: '/index/index'})

    coupon.value = result.data.CouponList
    product.value = result.data.ProductList
  }

  const CouponIndex = () => proxy.$router.push('/coupon')
</script>

<style>
  @import url('/assets/css/home.css');
</style>